<template>
  <div class="header">
    <div class="l-content">
      <el-icon @click="collapse">
        <Menu />
      </el-icon>
      <!-- <h3>首页 / </h3> -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(tag, index) in tags"
          :key="index"
          :to="{ name: tag.name }"
        >{{ tag.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="small">
        <span class="el-dropdown-link">
          <el-avatar :size="35" :src="user" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import user from '@/assets/logo.png';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();
const tags = computed(() => {
  return store.state.tab.tabList;
})

function collapse() {
  store.commit("CHANGETAB");
}
const logout = () => {
  store.commit('CLEARTOKEN');
  router.push({ name: 'Login' });
}

</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
  color: white;
  .l-content {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    .el-icon {
      cursor: pointer;
      font-size: 28px;
      margin-right: 10px;
    }

    // .el-breadcrumb ::v-deep .el-breadcrumb__inner {
    //   color: white;
    //   a:hover {
    //     color: green;
    //   }
    // }
  }
  .r-content {
    .el-dropdown-link {
      cursor: pointer;
      // color: var(--el-color-primary);
      color: white;
      display: flex;
      align-items: center;
    }
  }
}
</style>